// src/components/WithdrawForm.tsx
import { useState } from 'react';
import { useTokenContract } from '../hooks/useTokenContract';
import { toast } from 'react-toastify';

export function WithdrawForm() {
  const { isOwner, withdrawTokens, contractBalance } = useTokenContract();
  const [amount, setAmount] = useState("");
  const [recipient, setRecipient] = useState("");
  const [isWithdrawing, setIsWithdrawing] = useState(false);
  
  const handleWithdraw = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!isOwner || !amount || !recipient) return;
    
    setIsWithdrawing(true);
    const success = await withdrawTokens(amount, recipient);
    setIsWithdrawing(false);
    
    if (success) {
      toast.success("Tokens withdrawn successfully!");
      setAmount("");
      setRecipient("");
    } else {
      toast.error("Failed to withdraw tokens");
    }
  };
  
  if (!isOwner) return null;
  
  return (
    <div className="withdraw-form">
      <h2>Withdraw Tokens (Owner Only)</h2>
      <form onSubmit={handleWithdraw}>
        <div>
          <label>Amount (VST):</label>
          <input
            type="text"
            value={amount}
            onChange={(e) => setAmount(e.target.value)}
            placeholder={`Max: ${contractBalance}`}
          />
        </div>
        <div>
          <label>Recipient Address:</label>
          <input
            type="text"
            value={recipient}
            onChange={(e) => setRecipient(e.target.value)}
            placeholder="0x..."
          />
        </div>
        <button type="submit" disabled={isWithdrawing}>
          {isWithdrawing ? "Processing..." : "Withdraw"}
        </button>
      </form>
    </div>
  );
}